<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>节流</title>
</head>

<body>
    <div>
        <input id="inp"/>
    </div>
    <script>
        function throttle(fn,timer) {
            let canRun = true // 通过闭包保存一个标记
            console.log(canRun,111) //验证通过闭包的方式，此处代码只执行一次
            return function() {
                if (!canRun) return
                // 在函数开头判断标记是否为 true，不为 true 则 return
                canRun = false // 立即设置为 false
                setTimeout(() => {
                    // 将外部传入的函数的执行放在 setTimeout 中
                    fn.apply(this, arguments)
                    // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了。
                    // 当定时器没有执行的时候标记永远是 false，在开头被 return 掉
                    canRun = true
                }, timer)
            }
        }
        function sayHi(e) {
            console.log(e)
            console.log(e.target.innerWidth,e.target.innerHeight)
        }
        window.addEventListener('resize',throttle(sayHi,520))
    </script>
</body>
